<template>
  <div class="wrap" v-if="hasSection">
    <div class="head">
      <span class="title">{{ sectionTitle }}</span>
      <span v-if="moreBtn" class="more" @click="togglePopup">查看更多<i class="fa fa-dropright"></i></span>
    </div>
    <div class="body">
      <list-slider
        :auto-index="currentEpisodeIndex"
        :length="sections.length"
        :has-slider="false"
        @ready="onListSliderReady"
      >
        <ul class="section-list">
          <li
            v-for="item in sections"
            :key="item.id"
            @click="selectSection(item)"
          >
            <div class="cover">
              <img class="img" v-lazy="item.cover+'@234w_146h'" alt="item.long_title">
            </div>
            <div class="desc">{{ item.long_title || item.title }}</div>
          </li>
        </ul>
      </list-slider>
    </div>
    <van-popup
      v-if="moreBtn"
      class="vpopup"
      :show.sync="popupShow"
    >
      <template #title>
        <span>{{ sectionTitle }}({{ sections.length }})</span>
      </template>
      <ul class="section-list">
        <li
          v-for="item in sections"
          :key="item.id"
          @click="selectSection(item)"
        >
          <div class="cover">
            <img class="img" v-lazy="item.cover+'@170w_106h'" alt="item.long_title">
          </div>
          <div class="desc">{{ item.long_title || item.title }}</div>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import ListSlider from '@/components/list-slider/ListSlider.vue'
import VanPopup from '@/components/popup/Popup.vue'
export default {
  name: 'BangumiPart',
  components: {
    ListSlider,
    VanPopup
  },
  props: {
    info: {
      type: Object
    }
  },
  data () {
    return {
      moreBtn: false,
      popupShow: false,
      currentSeasonId: this.info ? this.info.ssId : -1,
      currentEpisodeId: this.info ? this.info.epInfo.id : -1,
      popupStyle: {
        top: '2.55rem'
      }
    }
  },
  computed: {
    hasInfo () {
      return this.info !== null
    },
    hasSection () {
      let flag = false
      if (this.hasInfo && this.info.mediaInfo && this.info.mediaInfo.section) {
        flag = true
      }
      return flag
    },
    sectionTitle () {
      let title = '选集'
      if (this.hasSection) {
        title = this.info.mediaInfo.section[0].title
      }
      return title
    },
    sections () {
      let arr = []
      if (this.hasSection) {
        arr = this.info.mediaInfo.section[0].episodes
      }
      return arr
    },
    currentEpisodeIndex () {
      let matchIndex = 0
      if (this.hasInfo) {
        const list = this.sections
        for (const [index, value] of list.entries()) {
          if (this.currentEpisodeId === value.id) {
            matchIndex = index
            break
          }
        }
      }
      return matchIndex
    }
  },
  methods: {
    onListSliderReady (needSlide) {
      this.moreBtn = needSlide
    },
    togglePopup () {
      this.popupShow = !this.popupShow
    },
    selectSection (section) {
      console.log(section)
    }
  }
}
</script>

<style lang="scss" scoped>
   .wrap{
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    @include border1px (#e7e7e7, 0 0 1px 0);
    .head{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .more{
    font-size: rem(13px);
    color: $color-text-secondary;
    .fa{
      font-size: rem(16px);
    }
  }
  .title{
    padding: {
      top: rem(10px);
      bottom: rem(10px);
    }
    font: {
      size: rem(16px);
      weight: 700;
    }
  }
  .section-list{
    white-space: nowrap;
    padding-bottom: rem(16px);
    li{
      display: inline-block;
      vertical-align: top;
      margin-right: rem(10px);
      width: rem(117px);
    }
    .cover{
      @include cover(117, 73, rem(5px));
      width: 100%;
      height: rem(73px);
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
    .desc{
      padding-top: rem(4px);
      @include max-lines(2);
      font-size: rem(12px);
      color: $color-text-regular;
      white-space: normal;
    }
  }
  .vpopup{
    .section-list {
      white-space: normal;
      li {
        width: rem(170px);
        margin-bottom: rem(10px);
        &:nth-child(2n) {
          margin-right: 0;
        }
        .cover{
          @include cover(170, 106, rem(5px));
          height: rem(106px);
        }
      }
    }
  }
  @media screen and (orientation:portrait) {
    .vpopup{
      top: rem(255px);
    }
  }
</style>
